<template>
  <div class="personal-wrap">
    <div class="container">
      <div class="form-card">
        <div class="card-header">
          <div class="header-icon">
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2C9.23858 2 7 4.23858 7 7C7 9.76142 9.23858 12 12 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M20.59 22C20.59 18.13 16.74 15 12 15C7.26 15 3.41 18.13 3.41 22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <h1 class="card-title">创建BOSS名片</h1>
          <p class="card-subtitle">完善您的个人信息，让求职者更信任您</p>
        </div>
        
        <el-form :model="form" :rules="rules" ref="formRef" label-width="0" class="personal-form">
          <div class="form-section">
            <div class="section-label">头像设置</div>
            <div class="avatar-section">
              <el-upload
                class="avatar-uploader"
                :show-file-list="false"
                :auto-upload="false"
                :before-upload="() => false"
                :on-change="onFileSelected"
              >
                <div class="avatar-wrapper">
                  <div class="avatar-circle">
                    <el-image
                      v-if="avatarDisplaySrc"
                      :src="avatarDisplaySrc"
                      fit="cover"
                      class="avatar-img"
                    />
                    <div v-else class="avatar-placeholder">
                      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2C9.23858 2 7 4.23858 7 7C7 9.76142 9.23858 12 12 12Z" stroke="currentColor" stroke-width="2"/>
                        <path d="M20.59 22C20.59 18.13 16.74 15 12 15C7.26 15 3.41 18.13 3.41 22" stroke="currentColor" stroke-width="2"/>
                      </svg>
                    </div>
                    <div class="avatar-overlay">
                      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M21 15V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M17 8L12 3L7 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M12 3V15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                      </svg>
                    </div>
                  </div>
                  <div class="avatar-hint">点击上传头像</div>
                </div>
              </el-upload>
              <el-button 
                v-if="!avatarUploaded"
                class="upload-btn" 
                type="primary" 
                :loading="uploading" 
                @click="uploadAvatarClick"
                :disabled="!selectedFile"
              >
                确认上传
              </el-button>
              <div v-else class="upload-success">
                <span class="success-text">✓ 头像上传成功</span>
                <el-button 
                  class="reupload-btn" 
                  size="small" 
                  @click="handleReupload"
                >
                  重新上传
                </el-button>
              </div>
            </div>
            <el-form-item prop="avatar" class="hidden-item">
              <el-input v-model="form.avatar" style="display: none;" />
            </el-form-item>
          </div>

          <div class="form-section">
            <div class="section-label">基本信息</div>
            <el-form-item prop="name">
              <el-input 
                v-model="form.name" 
                placeholder="请输入您的真实姓名" 
                size="large"
                class="form-input"
              >
                <template #prefix>
                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="input-icon">
                    <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="position">
              <el-input 
                v-model="form.position" 
                placeholder="请输入您的职务，如：技术总监、HR经理" 
                size="large"
                class="form-input"
              >
                <template #prefix>
                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="input-icon">
                    <path d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z" stroke="currentColor" stroke-width="2"/>
                    <path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="currentColor" stroke-width="2"/>
                  </svg>
                </template>
              </el-input>
            </el-form-item>
          </div>

          <div class="form-actions">
            <el-button 
              type="primary" 
              size="large" 
              :loading="submitting" 
              @click="onNext"
              class="submit-btn"
            >
              下一步
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="btn-icon">
                <path d="M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M12 5L19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { uploadAvatar, submitPersonalInfo } from '../src/api/enterprise.js'

const router = useRouter()
const formRef = ref()
const uploading = ref(false)
const submitting = ref(false)
const selectedFile = ref(null)
const avatarPreview = ref('')
const avatarDisplaySrc = ref('')
const avatarUploaded = ref(false)

const form = reactive({
  avatar: '',
  name: '',
  position: ''
})

const rules = {
  avatar: [{ required: true, message: '请上传头像', trigger: 'change' }],
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  position: [{ required: true, message: '请输入职务', trigger: 'blur' }]
}

function onFileSelected(file) {
  selectedFile.value = file.raw || file
  if (selectedFile.value) {
    avatarPreview.value = URL.createObjectURL(selectedFile.value)
    avatarDisplaySrc.value = avatarPreview.value
  }
}

async function uploadAvatarClick() {
  if (!selectedFile.value) {
    ElMessage.warning('请先选择图片')
    return
  }
  uploading.value = true
  try {
    const res = await uploadAvatar(selectedFile.value, 'avatar')
    if (res && res.status === 'success' && res.image_url) {
      form.avatar = res.image_url
      avatarDisplaySrc.value = form.avatar
      avatarUploaded.value = true
      selectedFile.value = null
      ElMessage.success('上传成功')
    } else {
      ElMessage.error(res?.error || '上传失败')
    }
  } catch (e) {
    ElMessage.error(e?.response?.data?.error || '上传失败')
  } finally {
    uploading.value = false
  }
}

function handleReupload() {
  avatarUploaded.value = false
  selectedFile.value = null
  avatarPreview.value = ''
  avatarDisplaySrc.value = ''
  form.avatar = ''
}

// 监听头像URL变化，如果已有URL则显示为已上传状态
watch(() => form.avatar, (newVal) => {
  if (newVal && !avatarUploaded.value) {
    avatarUploaded.value = true
    avatarDisplaySrc.value = newVal
  }
}, { immediate: true })

function saveTemp(data) {
  localStorage.setItem('recruiterInfoTemp', JSON.stringify(data))
}

const onNext = () => {
  formRef.value.validate(async (valid) => {
    if (!valid) return
    submitting.value = true
    try {
      const token = localStorage.getItem('token') || ''
      // 调用后端校验接口（不落库）
      const res = await submitPersonalInfo({ name: form.name, avatar: form.avatar, position: form.position, token })
      if (res && res.status === 'success') {
        saveTemp({ name: form.name, avatar: form.avatar, position: form.position })
        router.push('/enterprise/company')
      } else {
        ElMessage.error(res?.error || '提交失败')
      }
    } catch (e) {
      ElMessage.error(e?.response?.data?.error || '提交失败')
    } finally {
      submitting.value = false
    }
  })
}
</script>

<style scoped>
.personal-wrap {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.container {
  width: 100%;
  max-width: 680px;
}

.form-card {
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  padding: 48px 56px;
  animation: slideUp 0.5s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-header {
  text-align: center;
  margin-bottom: 40px;
}

.header-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.header-icon svg {
  width: 32px;
  height: 32px;
}

.card-title {
  font-size: 32px;
  font-weight: 700;
  color: #1a202c;
  margin: 0 0 8px 0;
  letter-spacing: -0.5px;
}

.card-subtitle {
  font-size: 15px;
  color: #718096;
  margin: 0;
}

.personal-form {
  margin-top: 0;
}

.form-section {
  margin-bottom: 32px;
}

.section-label {
  font-size: 14px;
  font-weight: 600;
  color: #4a5568;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.avatar-uploader {
  width: 100%;
  display: flex;
  justify-content: center;
}

.avatar-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.avatar-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  border: 3px solid #e2e8f0;
  transition: all 0.3s ease;
}

.avatar-wrapper:hover .avatar-circle {
  border-color: #667eea;
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  width: 48px;
  height: 48px;
  color: #cbd5e0;
}

.avatar-placeholder svg {
  width: 100%;
  height: 100%;
}

.avatar-overlay {
  position: absolute;
  inset: 0;
  background: rgba(102, 126, 234, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 50%;
}

.avatar-wrapper:hover .avatar-overlay {
  opacity: 1;
}

.avatar-overlay svg {
  width: 32px;
  height: 32px;
}

.avatar-hint {
  font-size: 14px;
  color: #718096;
  font-weight: 500;
}

.upload-btn {
  min-width: 140px;
  height: 44px;
  border-radius: 12px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  transition: all 0.3s ease;
}

.upload-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.upload-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.upload-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.success-text {
  color: #00c293;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.reupload-btn {
  border-radius: 8px;
  color: #667eea;
  border-color: #667eea;
}

.reupload-btn:hover {
  background: #f0f4ff;
  border-color: #667eea;
}

.hidden-item {
  margin: 0;
  height: 0;
  overflow: hidden;
}

.form-input {
  border-radius: 12px;
}

.form-input :deep(.el-input__wrapper) {
  border-radius: 12px;
  box-shadow: 0 0 0 1px #e2e8f0 inset;
  padding: 12px 16px;
  transition: all 0.3s ease;
}

.form-input :deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px #cbd5e0 inset;
}

.form-input :deep(.el-input.is-focus .el-input__wrapper) {
  box-shadow: 0 0 0 2px #667eea inset;
}

.input-icon {
  width: 20px;
  height: 20px;
  color: #a0aec0;
  margin-right: 8px;
}

.form-input :deep(.el-input__inner) {
  font-size: 15px;
  color: #2d3748;
}

.el-form-item {
  margin-bottom: 20px;
}

.form-actions {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

.submit-btn {
  min-width: 200px;
  height: 52px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.submit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(102, 126, 234, 0.5);
}

.submit-btn:active:not(:disabled) {
  transform: translateY(0);
}

.btn-icon {
  width: 20px;
  height: 20px;
}

@media (max-width: 768px) {
  .form-card {
    padding: 32px 24px;
    border-radius: 16px;
  }

  .card-title {
    font-size: 24px;
  }

  .avatar-circle {
    width: 100px;
    height: 100px;
  }
}
</style>


